<template>
	<div class="collapse-panel">
		<div class="collapse-panel2">
			<div class="header2 ss-r-10" @click="toggle(1)" v-if="num==1"
				:style="{backgroundImage: status==2 ? 'linear-gradient(to right, #f4f0e0,#edd2c4, #f4dadb)' : (status==1?'linear-gradient(to right, #e2f6eb, #c4e7e2,#d8edf4)':'linear-gradient(to right,#ededed,#e1e1e1,#eaeaea)')}">
				<div v-if="site=='left'">
					<div style="display: flex;align-items: center;justify-content: flex-start;">
						<div>{{ title }}</div>
						<div v-if="lock==2" style="margin-left: 14rpx;">
							<uv-icon name="lock" color="#6b6b6b" size="21" />
						</div>
					</div>
					<div class="ss-font-23">已完成{{finishedTaskNum||0}} 剩余设备数{{deviceRemainTotal||0}}
						应完成{{totalTaskNum||0}}
					</div>
				</div>
				<image mode="widthFix" :src="isOpen ? bu : rg" />
				<div v-if="site!='left'">
					<div class="ss-font-28">{{ title }}</div>
					<div class="ss-font-23 m_left">已完成{{finishedTaskNum||0}} 剩余设备数{{deviceRemainTotal||0}}
						应完成{{totalTaskNum||0}}
					</div>
				</div>
			</div>
			<div class="header2 ss-r-10" @click="toggle(lock)" v-if="num!=1" style="border:2rpx soild grey;"
				:style="{background: search == deviceId ? 'linear-gradient(to right,#E6F1E9,#E6F1E9)': (lock==2?'linear-gradient(to right,#f9f9fb,#f6f6f9,#f9f9fb)':'#f6feff')}">
				<div v-if="site=='left'">
					<div class="ss-flex ss-font-28">
						<uv-icon v-if="status==1&&lock!=2" name="checkmark-circle-fill" color="#4EA770" size="18" />
						<uv-icon v-if="status==2&&lock!=2" name="close-circle-fill" color="#FF3B30" size="18" />
						<div class="ss-m-x-10">{{ title }}（{{getTimes()}}）</div>
					</div>
					<div class="ss-font-24 ss-flex ss-row-between" style="width: 100%;">
						<!-- 左边选中后返回的id{{search}} 右边数据自带的id{{deviceId}}  相等变颜色-->
						<div class="ss-m-x-10 ss-font-23 m_left">已完成{{finishedTaskNum||0}}
							剩余设备数{{deviceRemainTotal||0}}
							应完成{{totalTaskNum||0}}
						</div>
					</div>
					<div class="ss-flex ss-font-26 ss-row-between"
						style="width: 210rpx;height: 40rpx;margin:0 auto;margin-top: 18rpx;" v-if="isOpen&&lock != 2"
						@click.stop="jump(subPlanId,deviceId)">
						<uv-icon name="search" color="#4EA770" size="20" />
						<div style="color: #4EA770;">查找相同设备</div>
					</div>
				</div>
				<div v-if="lock==2">
					<uv-icon name="lock" color="#6b6b6b" size="22" />
				</div>
				<div v-if="lock!=2">
					<image mode="widthFix" :src="isOpen ? bu : rg" />
				</div>

				<div v-if="site!='left'">
					<div>{{ title }}</div>
					<div class="ss-font-23 m_left">已完成{{finishedTaskNum||0}} 剩余设备数{{deviceRemainTotal||0}}
						应完成{{totalTaskNum||0}}
					</div>
				</div>
			</div>
			<uv-transition :show="isOpen" mode="slide-top">
				<div v-if="isOpen" class="content">
					<slot :open="isOpen"></slot>
					<div v-if="num!=1&&isOpen" style="height: 20rpx;" />
				</div>
			</uv-transition>
		</div>
	</div>
</template>

<script>
	import rg from "./rg.png"
	import bu from "./bu.png"
	export default {
		name: 'CollapsePanel',
		props: {
			title: String,
			open: Boolean,
			site: { //文字位置
				type: String,
				default: 'left',
			},
			inde: Number,
			num: Number,
			status: Number,
			totalTaskNum: Number,
			finishedTaskNum: Number,
			lock: Number,
			subPlanId: Number,
			deviceRemainTotal: Number,
			floorId: Number,
			deviceId: Number,
			search: [String, Number],
			times: String,
			// 离线模式
			offlineMode: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				isOpen: this.open || false,
				rg: rg,
				bu: bu,
			};
		},
		methods: {
			toggle(e) {
				if (e == 2) {
					this.$emit('taskTip', {
						deviceId: this.deviceId,
						floorId: this.floorId,
						subPlanId: uni.getStorageSync('subPlanId') || ''
					})
					return
				}
				this.isOpen = !this.isOpen;
				this.$emit('toggle', this.isOpen)
			},
			jump(e, deviceId) {
				if (this.offlineMode) {
					uni.showToast({
						title: '离线模式下无法使用',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/Task/searchSystem?subPlanId=${e}&deviceId=${deviceId}`
				})
			},
			getTimes() {
				switch (this.times) {
					case 'MONTH':
						return '月检'
						break;
					case 'QUARTER':
						return '季检'
						break;
					case 'HALF_A_YEAR':
						return '半年检'
						break;
					case 'YEAR':
						return '年检'
						break;
					default:
						return '两年检'
						break;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/uni.scss';

	.warp {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.m_left {
		margin-left: 14rpx;
	}

	.rect {
		background-color: #fff;
		text-align: center;

		.icon_mes {
			width: 110rpx;
			margin: 20rpx auto;
			margin-top: 50rpx;
		}

		.rect_line {
			margin-top: 20rpx;
			width: 100%;
			height: 2rpx;
			background: #E5E5E5;
		}

		.rect_btn {
			width: 48%;
			text-align: center;
		}

		.btn_line {
			height: 70rpx;
			width: 2rpx;
			background: #E5E5E5;
		}
	}

	.collapse-panel {
		height: auto;
		overflow: hidden;
		line-height: 50rpx;
	}

	.content {
		overflow: hidden;
	}

	.collapse-panel2 {
		position: relative;
	}

	.header2 {
		position: relative;
		text-align: left;
		cursor: pointer;
		padding: 25rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		z-index: 1;
		font-size: 1rem;
		border: 1px solid #eaeaea;
		justify-content: space-between;
		transition: all 0.3s;

		&:active {
			background-color: #f5f5f5;
		}
	}

	image {
		width: 32rpx;
		height: 32rpx;
	}
</style>